<template>
  <div class="app-container">
    <div class="search">
      <el-button type="primary" @click="addForm">新增表单</el-button>
    </div>
    <div class="table-list">
      <el-table :data="formList" border stripe style="width: 100%">
        <el-table-column prop="formCode" label="表单编码"> </el-table-column>
        <el-table-column prop="formInstName" label="表单名称"> </el-table-column>
        <el-table-column prop="formStatus" label="表单状态"> </el-table-column>
        <el-table-column prop="baseBranchCode" label="所属组织">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="createBy" label="创建人"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="fillForm(row)">填写表单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pager.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.total"
      >
      </el-pagination>
    </div>
    <FormDialog :visible.sync="formDialog.visible" :form="formDialog.form"></FormDialog>
  </div>
</template>
<script>
import FormDialog from "./formDialog.vue";
import { mapGetters } from "vuex";
import { createFormInst, getFormList } from "@/api/table/index.js";
export default {
  components: { FormDialog },
  data() {
    return {
      formDialog: {
        visible: false,
        form: null
      },
      formList: [],
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getFormList();
  },
  computed: {
    ...mapGetters(["name", "baseBranchinnercode"]),
  },
  methods: {
    getFormList() {
      const { pageNum, pageSize } = this.pager;
      const param = {
        pageNum,
        pageSize,
        query: {
          baseBranchCode: "",
          formCode: "",
          formStatus: "",
        },
      };
      getFormList(param)
        .then((res) => {
          this.formList = res.rows;
          this.pager.total = res.total;
        })
        .catch((err) => {
          this.formList = [];
          this.pager.total = 0;
        });
    },
    handleSizeChange(val) {
      this.pager.pageSize = val;
      this.getFormList();
    },
    handleCurrentChange(val) {
      this.pager.pageNum = val;
      this.getFormList();
    },
    addForm() {
      // this.$confirm("是否确定添加表单?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: 'warning'
      // })
      //   .then(() => {
      //       const param = {
      //         baseBranchCode: "宜兴",
      //         formCode: "demo_f",
      //         bizTime: this.parseTime(new Date()),
      //         inputor: this.name,
      //         auditor: this.name,
      //       };
      //       createFormInst(param)
      //         .then((res) => {
      //           if (res.code == 200) {
      //             this.msgSuccess("创建成功");
      //             this.getFormList();
      //           } else {
      //             this.msgSuccess(res.msg);
      //           }
      //         })
      //         .catch((err) => {
      //           this.msgError(err);
      //         });
      //   })
      //   .catch(() => {});
      this.$prompt("请输入表单名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // inputPattern: /^[a-zA-Z_0-9]+$/,
        // inputErrorMessage:
        //   "请填写表单编码(由“大写字母”或“小写字母”或“数字”或“_”组成)",
      })
        .then(({ value }) => {
          const param = {
            baseBranchCode: "宜兴",//this.baseBranchinnercode,
            formCode: "demo_f",
            formInstName: value,
            bizTime: this.parseTime(new Date()),
            inputor: this.name,
            auditor: this.name,
          };
          createFormInst(param)
            .then((res) => {
              if (res.code == 200) {
                this.msgSuccess("创建成功");
                this.getFormList()
              } else {
                this.msgSuccess(res.msg);
              }
            })
            .catch((err) => {
              this.msgError(err);
            });
        })
        .catch(() => {});
    },
    fillForm(row) {
      this.formDialog.visible = true;
      this.formDialog.form = row
    },
  },
};
</script>
<style lang="scss" scoped>
.search {
  margin-bottom: 10px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
</style>
